<template>
  <div>
    <section class="header">
      <i class="iconfont iconfanhui1" @click="goBack()"></i>
      <span @click="goBack()">添加员工</span>
    </section>
    <div class="p-t-lg">
      <div class="main clearfix">
        <el-divider content-position="left" style="font-size: 8px;">基本信息</el-divider>
        <el-descriptions direction="vertical" :column="4" size="mini" border>
          <el-descriptions-item label="姓名 *"><el-input v-model="userDetail.fullName" placeholder="在这里输入姓名" size="mini" clearable></el-input></el-descriptions-item>
          <el-descriptions-item label="身份证 *"><el-input v-model="userDetail.idCardNo" placeholder="在这里输入身份证" maxlength="18" @change="idCardChange" size="mini"></el-input></el-descriptions-item>
          <el-descriptions-item label="民族 *">
            <el-select v-model.trim="userDetail.nation" filterable placeholder="请选择" size="mini" >
              <el-option v-for="(item, index) in nationOptions" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="性别 *">
            <el-select v-model.trim="userDetail.sex" placeholder="请选择" size="mini" >
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item label="手机号 *"><el-input placeholder="在这里输入手机号" v-model.trim="userDetail.phone" maxlength="11" clearable size="mini" ></el-input></el-descriptions-item>
          <el-descriptions-item label="户籍类型 *">
            <el-select v-model="userDetail.censusRegisterType" placeholder="请选择" size="mini" >
              <el-option v-for="item in censusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="参保身份 *">
            <el-select v-model="userDetail.insuredStatus" filterable placeholder="请选择" size="mini" >
              <el-option v-for="(item, index) in insuredStatusOptions" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="职工工种 *">
            <el-select v-model="userDetail.typeOfWork" filterable placeholder="请选择" size="mini" >
              <el-option
                v-for="(item, index) in typeOfWorkOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item label="户籍地址 *">
            <el-input placeholder="户籍地址" v-model.trim="userDetail.permanentAddress" clearable size="mini" ></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="最高学历 *">
            <el-select v-model.trim="userDetail.education" filterable placeholder="请选择" size="mini" >
              <el-option v-for="item in educationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址 *" :span="2">
            <el-input placeholder="在这里输入联系地址" v-model.trim="userDetail.address" clearable size="mini" style="width: 80%" ></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!--社保/公积金-->
    <div class="p-t-lg">
      <div class="main clearfix">
        <el-divider content-position="left" style="font-size: 8px;">缴纳项控制</el-divider>
        <div class="input-box-max">
          <el-descriptions :column="3" size="mini" border>
            <el-descriptions-item label="缴纳项目 *" :span="3">
              <el-checkbox v-model="isPaySocialSecurity" @change="changeType" size="mini">社保</el-checkbox>
              <el-checkbox v-model="isPayMedical" @change="changeType" size="mini">医保</el-checkbox>
              <el-checkbox v-model="isPayFund" @change="changeType" size="mini">公积金</el-checkbox>
              <el-checkbox v-model="isWages" @change="changeType" size="mini">工资</el-checkbox>
              <el-checkbox v-model="associatedContracts" @change="changeType" size="mini">合同</el-checkbox>
              
            </el-descriptions-item>

            <el-descriptions-item label="当地社保 *">
              <el-select v-model="userDetail.isLocalSocialSecurity" placeholder="请选择" size="mini">
                <el-option v-for="item in isLocalSocialSecurityOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="缴纳城市 *">
              <el-select v-model="userDetail.areaCode" @change="getPlatform" placeholder="请选择" filterable size="mini">
                <el-option v-for="item in addressOptions" :key="item.areaCode" :label="item.areaName" :value="item.areaCode"></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="缴纳平台 *">
              <el-select v-model="userDetail.platformId" placeholder="请选择" size="mini">
                <el-option v-for="item in platformOptions" :key="item.platformId" :label="item.platformName" :value="item.platformId"></el-option>
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="input-box-max" v-show="isPaySocialSecurity">
          <el-divider content-position="left" style="font-size: 8px;">社保(养老、失业、工伤、残保金)</el-divider>
          <div>
            <el-descriptions direction="vertical" :column="5" size="mini" border>
              <el-descriptions-item label="社保账号"><el-input v-model="userDetail.socialSecurityAccount" placeholder="输入社保账号" size="mini"></el-input></el-descriptions-item>
              <el-descriptions-item label="社保起缴月份">
                <el-date-picker v-model="userDetail.socialSecurityDate" type="month" format="yyyy 年 MM 月" value-format="yyyy-MM" size="mini"
                                placeholder="选择月份" :picker-options="pickerOptions"></el-date-picker>
              </el-descriptions-item>
              <el-descriptions-item label="社保基数"><el-input v-model="userDetail.socialSecurityBasic" placeholder="输入社保基数" size="mini"><template slot="append">元</template></el-input>
                <div class="data-range" v-if="socialSecurityBasicValMin > 0 && socialSecurityBasicValMax > 0">
                  取值范围：{{ socialSecurityBasicValMin }}~{{ socialSecurityBasicValMax }}
                </div>
              </el-descriptions-item>
              
              <el-descriptions-item label="社保养老企业支付">{{((userDetail.companyRetirementRate/100)||0)*(userDetail.socialSecurityBasic||0)}}元</el-descriptions-item>
              <el-descriptions-item label="社保养老个人支付">{{((userDetail.personRetirementRate/100)||0)*(userDetail.socialSecurityBasic||0)}}元</el-descriptions-item>

              <el-descriptions-item label="社保失业公司支付">{{(((userDetail.companyUnemploymentRate/100)||0)*(userDetail.socialSecurityBasic||0))}}元</el-descriptions-item>
              <el-descriptions-item label="社保失业个人支付">{{(((userDetail.personUnemploymentRate/100)||0)*(userDetail.socialSecurityBasic||0))}}元</el-descriptions-item>
              <el-descriptions-item label="社保工伤公司支付">{{(((userDetail.companyNdustrialInjuryRate/100)||0)*(userDetail.socialSecurityBasic||0))}}元</el-descriptions-item>
              <el-descriptions-item label="社保残保金公司支付">{{(((userDetail.companyDisabilityBenefitsRate/100)||0)*(userDetail.socialSecurityBasic||0))}}元</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="input-box-max" v-show="isPayMedical">
          <el-divider content-position="left" style="font-size: 8px;">医保</el-divider>
          <el-descriptions direction="vertical" :column="3" size="mini" border>
            <el-descriptions-item label="医保基数"><el-input v-model="userDetail.medicalInsuranceBase" placeholder="输入医保基数" size="mini"><template slot="append">元</template></el-input></el-descriptions-item>
            <el-descriptions-item label="医保企业支付">{{(((userDetail.companyMedicalRate/100)||0)*(userDetail.medicalInsuranceBase||0))}}元</el-descriptions-item>
            <el-descriptions-item label="医保个人支付" >{{(((userDetail.personMedicalRate/100)||0)*(userDetail.medicalInsuranceBase||0))}}元</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="input-box-max" v-show="isPayFund">
          <el-divider content-position="left" style="font-size: 8px;">公积金</el-divider>
          <el-descriptions direction="vertical" :column="5" size="mini" border>
            <el-descriptions-item label="公积金账号"><el-input v-model="userDetail.fundAccount" placeholder="输入公积金账号" size="mini"></el-input></el-descriptions-item>
            <el-descriptions-item label="公积金起缴月份">
              <el-date-picker v-model="userDetail.fundDate" type="month"
                             format="yyyy 年 MM 月" value-format="yyyy-MM"
                              placeholder="选择月份" :picker-options="fundPickerOptions" size="mini">
              </el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item label="公积金基数"><el-input v-model="userDetail.fundBasic" placeholder="输入公积金基数" size="mini"><template slot="append">元</template></el-input>
              <div class="data-range" v-if="fundBasicValMin > 0 && fundBasicValMax > 0">
                取值范围：{{ fundBasicValMin }}~{{ fundBasicValMax }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="公积金企业支付">{{(((userDetail.companyFundRate/100)||0)*(userDetail.fundBase||0))}}元</el-descriptions-item>
            <el-descriptions-item label="公积金个人支付">{{(((userDetail.personFundRate/100)||0)*(userDetail.fundBase||0))}}元</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="input-box-max" v-show="isWages">
        <el-divider content-position="left" style="font-size: 8px;">工资</el-divider>
        <el-descriptions :column="1" size="mini" border>
          <el-descriptions-item label="工资">
            <el-input placeholder="在这里输入工资" v-model.trim="userDetail.wages" clearable size="mini" ><template slot="append">元</template></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="input-box-max" v-show="associatedContracts">
        <el-divider content-position="left" style="font-size: 8px;">关联合同</el-divider>
        <el-descriptions :column="4" size="mini" border>
          <el-descriptions-item label="合同编号">
            <el-input placeholder="在这里输入合同编号" v-model.trim="userDetail.contractNumber" clearable size="mini" ></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="合同开始日期">
            <el-date-picker placeholder="合同开始日期" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                             v-model="userDetail.laborContractStart" :picker-options="laborContractPickerOptions" clearable size="mini" >
                            </el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item label="合同结束日期">
            <el-date-picker placeholder="在这里输入合同结束日期" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" 
              v-model="userDetail.laborContractEnd" :picker-options="laborContractPickerOptions" clearable size="mini" >
            </el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item label="用工协议类型">
            <el-select v-model="userDetail.employmentAgreementType" filterable placeholder="请选择" size="mini" >
              <el-option v-for="item in employmentAgreementTypeOptions" :key="item.employmentAgreementTypeId" :label="item.employmentAgreementTypeName" :value="item.employmentAgreementTypeId"></el-option>
            </el-select>
          </el-descriptions-item>
        </el-descriptions>
      </div>

    </div>

    <!--证件照片/扫描件-->
    <div class="p-t-lg">
      <header class="clearfix">
        <div class="title">证件照片/扫描件</div>
      </header>
      <div class="main">
        <div class="clearfix">
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading2" @click="showImg(0)">
              <el-image
                v-if="userDetail.idCardFrontPhotoPath"
                style="width: 100%; height: 100%"
                :src="userDetail.idCardFrontPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证正面照片(头像面)</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 2)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading3" @click="showImg(1)">
              <el-image
                v-if="userDetail.idCardBackPhotoPath"
                style="width: 100%; height: 100%"
                :src="userDetail.idCardBackPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>身份证反面照片(国徽面)</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 3)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading4" @click="showImg(2)">
              <el-image
                v-if="userDetail.residenceBookMainPath"
                style="width: 100%; height: 100%"
                :src="userDetail.residenceBookMainPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本主页</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 4)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-bj" v-loading="isLoading5" @click="showImg(3)">
              <el-image
                v-if="userDetail.residenceBookPersonalPath"
                style="width: 100%; height: 100%"
                :src="userDetail.residenceBookPersonalPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>户口本个人页</p>
            <ul>
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 5)" />
              </li>
            </ul>
          </div>
          <div class="img-box">
            <div class="img-head" v-loading="isLoading1" @click="showImg(4)">
              <el-image
                v-if="userDetail.personPhotoPath"
                style="width: 100%; height: 100%"
                :src="userDetail.personPhotoPath"
                :preview-src-list="srcList"
              ></el-image>
            </div>
            <p>二寸白底免冠照</p>
            <ul class="tip-head">
              <li class="upBtn">
                上传
                <input type="file" name="" id="" @change="upImg($event, 1)" />
              </li>
            </ul>
          </div>
        </div>
        <ul class="explain">
          <li>说明</li>
          <li>1.照片中证件不可以被遮挡，需清晰看到文字信息</li>
          <li>2.照片中证件需为原件，请勿上传复印件照片</li>
          <li>3.仅支持jpg, jpeg, png格式的图片</li>
        </ul>
      </div>
    </div>
    <div class="button-box">
      <el-button @click="goBack()">返回</el-button>
      <el-button type="primary" :loading="submitLoading" @click="submit()"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import commonData from "@/assets/js/commonData";
import { requestApiPost, requestApiFilePost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "addEmployee",
  data() {
    return {
      //设置日期组件
      pickerOptions: {
        disabledDate(time) {
          //获取下个月的毫秒数
          let date = new Date();
          let nDate = new Date(
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate()
          ).getTime();
          return time.getTime() > nDate;
        },
      },
      laborContractPickerOptions: {
        disabledDate(time) {
          //获取下个月的毫秒数
          let date = new Date();
          let nDate = new Date(
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate()
          ).getTime();
          return time.getTime() > nDate;
        },
      },
      fundPickerOptions: {
        disabledDate(time) {
          //获取下个月的毫秒数
          let date = new Date();
          let nDate = new Date(
            date.getFullYear(),
            date.getMonth() + 1,
            date.getDate()
          ).getTime();
          return time.getTime() > nDate;
        },
      },
      /*
        --是否缴纳公众金
        isPayFund: true,
        --是否缴纳工资
        isWages: true,
        --是否缴纳社保
        isPaySocialSecurity: true,
        --是否缴纳医保
        isPayMedical: true,
      */
      isPayFund: true,
      isWages: true,
      isPaySocialSecurity: true,
      isPayMedical: true,
      associatedContracts:true,
      
      isLoading1: false,//户口本个人页
      isLoading2: false,//证件照片/扫描件
      isLoading3: false,//身份证正面照片(头像面)
      isLoading4: false,//身份证反面照片(国徽面)
      isLoading5: false,//户口本主页
      submitLoading: false,//二寸白底免冠照
      areaPaymentOptions: [],
      
      //用户信息
      userDetail: {
        fullName:"",//姓名
        idCardNo:"",//身份证
        nation: "汉族",//民族
        sex: 1,//性别
        phone:"",//手机号
        censusRegisterType: 1,//户籍类型
        insuredStatus: 0,//参保身份
        typeOfWork: 0,//职工工种
        permanentAddress: "",//户籍地址
        education: 0,//最高学历
        address:"",//联系地址

        isLocalSocialSecurity: 0,//当地社保
        areaCode:"",//缴纳城市
        platformId: 0,//缴纳平台
        /*社保*/
        socialSecurityAccount:"",//社保账号
        socialSecurityBasic:"",//社保基数
        socialSecurityDate:"",//社保起缴月份
        companyRetirementRate:"",//社保养老企业支付
        personRetirementRate:"",//社保养老个人支付
        companyUnemploymentRate:"",//社保失业公司支付
        personUnemploymentRate:"",//社保失业个人支付
        companyNdustrialInjuryRate:"",//社保工伤公司支付
        companyDisabilityBenefitsRate:"",//社保残保金公司支付
        /*医保*/
        medicalInsuranceBase:"",//医保基数
        companyMedicalRate:"",//医保企业支付
        personMedicalRate:"",//医保个人支付
        /*公积金*/
        fundAccount:"",//公积金账号
        fundBasic:"",//公积金基数
        companyFundRate:"",//公积金企业支付
        personFundRate:"",//公积金个人支付
        fundDate:"",//公积金起缴月份
        /*工资*/
        wages:"",//工资
        /*合同*/
        contractNumber:"",//合同编号
        laborContractStart:"",//合同开始日期
        laborContractEnd:"",//合同结束日期
        employmentAgreementType:"",//用工协议类型（1：劳务派遣，2：非劳务派遣）
        /*证件照片*/
        idCardFrontPhotoPath:"",//身份证正面照片(头像面)
        idCardBackPhotoPath:"",//身份证反面照片(国徽面)
        residenceBookMainPath:"",//户口本主页
        residenceBookPersonalPath:"",//户口本个人页
        personPhotoPath:"",//二寸白底免冠照
      },

      employmentAgreementTypeOptions:[
        {
          employmentAgreementTypeId:1,
          employmentAgreementTypeName:"劳务派遣"
        },
        {
          employmentAgreementTypeId:2,
          employmentAgreementTypeName:"非劳务派遣"
        }
      ],
      itemClassification: [],
      platformOptions: [],
      
      srcList: [],
      imgList: [],
      sexOptions: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      

      form: {},
      addressOptions: [],
      censusOptions: [],
      cityCode: "",
      setSocialMonth: "",
      setGjjMonth: "",
      paymentList: [],
      paymentTypeOptions: [
        {
          value: "0",
          label: "值",
        },
        {
          value: "1",
          label: "比例",
        },
      ],
      nationOptions: [],
      educationOptions: [],
      isLocalSocialSecurityOptions: [
        {
          value: "0",
          label: "交过",
        },
        {
          value: "1",
          label: "未交过",
        },
      ],
      basicInfoTable: [], //缴纳项目
      socialSecurityBasicValMax: "",
      socialSecurityBasicValMin: "",
      fundBasicValMax: "",
      fundBasicValMin: "",
      insuredStatusOptions: [],
      typeOfWorkOptions: [],
    };
  },
  methods: {
    //根据身份证获取性别
    idCardChange(idCard) {
      if (base.isCardId(idCard)) {
        let sex = base.getSexByIdCard(idCard);
        this.$set(this.userDetail, "sex", sex);
        //查询是否存在
      }
    },
    //处理合计
    
    //删除区域缴纳项目
    
    //获取企业区域缴纳项目
    getAreaPayment() {
      this.areaPaymentOptions = [];
      var reqData = {
        companyId: this.$route.query.companyId,
        areaPaymentId: "",
        current: 1,
        pageSize: 999,
        areaCode: this.userDetail.areaCode ? this.userDetail.areaCode : "",
      };
      let reqReport = reqRep({
        traCode: "_LIST_COMPANY_PAYMENT",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.areaPaymentOptions = resReport.data.records || [];

          /**直接赋值给表格 */
          for (let index = 0; index < this.areaPaymentOptions.length; index++) {
            this.areaPaymentOptions[index].paymentTypeId = this.areaPaymentOptions[
              index
            ].paymentItemType;
          }
          console.log(this.areaPaymentOptions)
          this.baseList = this.areaPaymentOptions;
          this.changeType();
        }
      });
    },
    //判断期缴月份
    judgeMonth(type) {
      let timeValue = "";
      if (type == "1") {
        timeValue = this.setSocialMonth;
        if (
          timeValue.split("-")[0] > this.userDetail.socialSecurityYears.split("-")[0] ||
          timeValue.split("-")[1] > this.userDetail.socialSecurityYears.split("-")[1]
        ) {
          this.$message.warning("月份不符合规则");
          this.userDetail.socialSecurityYears = "";
          return;
        }
      } else {
        timeValue = this.setGjjMonth;
        if (
          timeValue.split("-")[0] > this.userDetail.gjjPayYears.split("-")[0] ||
          timeValue.split("-")[1] > this.userDetail.gjjPayYears.split("-")[1]
        ) {
          this.$message.warning("月份不符合规则");
          this.userDetail.gjjPayYears = "";
          return;
        }
      }
    },
    //展示指定图片
    showImg(i) {
      this.srcList = [];
      this.srcList.push(this.imgList[i]);
    },
    //返回
    goBack() {
      this.$router.go(-1);
    },
    //确认新增缴纳项目

    //确认修改缴纳项目

    //选择区域项目

    //获取缴纳项目比例的金额
    getPaymentAmount() {
      //paymentType==1 比例
      //paymentItemType==1 社保 paymentItemType==2 公积金
      //userDetail.socialSecurityBasic 社保基数 userDetail.fundBasic 公积金基数
      for (let index = 0; index < this.basicInfoTable.length; index++) {
        //比例
        if (this.basicInfoTable[index].paymentType == 1) {
          //社保/公积金
          if (
            this.basicInfoTable[index].paymentItemType == 1 ||
            this.basicInfoTable[index].paymentItemType == 2
          ) {
            //基数
            let baseVal = 0;
            let companyVal = base.accDiv(this.basicInfoTable[index].companyVal, 100) || 0;
            let personVal = base.accDiv(this.basicInfoTable[index].personVal, 100) || 0;

            if (this.basicInfoTable[index].paymentItemType == 1) {
              baseVal = this.userDetail.socialSecurityBasic || 0;
            } else if (this.basicInfoTable[index].paymentItemType == 2) {
              baseVal = this.userDetail.fundBasic || 0;
            }

            let companyAmount = base.accMul(baseVal, companyVal) || 0;
            let personAmount = base.accMul(baseVal, personVal) || 0;

            if (this.basicInfoTable[index].paymentItemType == 2) {
              //公积金四舍五入取整
              companyAmount = Number(companyAmount.toFixed(0));
              personAmount = Number(personAmount.toFixed(0));
            } else if (this.basicInfoTable[index].paymentItemType == 1) {
              //社保四舍五入保留2位小数
              companyAmount = Number(companyAmount.toFixed(2));
              personAmount = Number(personAmount.toFixed(2));
            }

            //修改表格基数
            this.$set(this.basicInfoTable[index], "basic", baseVal);
            this.$set(this.basicInfoTable[index], "companyAmount", companyAmount);
            this.$set(this.basicInfoTable[index], "personAmount", personAmount);
          } else {
            //其他项目

            //基数
            let baseVal = this.basicInfoTable[index].basic || 0;

            let companyVal = base.accDiv(this.basicInfoTable[index].companyVal, 100) || 0;
            let personVal = base.accDiv(this.basicInfoTable[index].personVal, 100) || 0;

            let companyAmount = base.accMul(baseVal, companyVal) || 0;
            let personAmount = base.accMul(baseVal, personVal) || 0;

            //四舍五入保留2位小数
            companyAmount = Number(companyAmount.toFixed(2));
            personAmount = Number(personAmount.toFixed(2));

            this.$set(this.basicInfoTable[index], "companyAmount", companyAmount);
            this.$set(this.basicInfoTable[index], "personAmount", personAmount);
          }
        } else {
          //值
          this.$set(this.basicInfoTable[index], "companyAmount", 0);
          this.$set(this.basicInfoTable[index], "personAmount", 0);
        }
      }
    },
    //获取缴纳城市
    getAddress() {
      var reqData = {
        grade: 1,
        isStart: 0,
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_AREA", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.addressOptions = resReport.data.records;
        }
      });
    },
    //获取平台
    getPlatform() {
      var reqData = {
        PName: "",
        areaCode: this.userDetail.areaCode ? this.userDetail.areaCode : "",
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_PAY_PLATFORM", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.platformOptions = resReport.data.records;
          this.getAreaPayment();
        }
      });
    },
    //修改类型
    changeType() {
      this.basicInfoTable = [];
      this.confirmAdd();
    },
    //上传
    upImg(e, type) {
      let that = this;
      switch (type) {
        case 1:
          this.isLoading1 = true;
          break;
        case 2:
          this.isLoading2 = true;
          break;
        case 3:
          this.isLoading3 = true;
          break;
        case 4:
          this.isLoading4 = true;
          break;
        case 5:
          this.isLoading5 = true;
          break;
      }

      requestApiFilePost(e.target.files[0]).then((data) => {
        let resReport = resRep(data);
        e.target.value = "";
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          switch (type) {
            case 1:
              this.isLoading1 = false;
              break;
            case 2:
              this.isLoading2 = false;
              break;
            case 3:
              this.isLoading3 = false;
              break;
            case 4:
              this.isLoading4 = false;
              break;
            case 5:
              this.isLoading5 = false;
              break;
          }
          if (type == 1) {
            that.$set(
              that.userDetail,
              "personPhotoPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "personPhotoId", resReport.data.fileId);
          } else if (type == 2) {
            that.$set(
              that.userDetail,
              "idCardFrontPhotoPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "idCardFrontPhotoId", resReport.data.fileId);
          } else if (type == 3) {
            that.$set(
              that.userDetail,
              "idCardBackPhotoPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "idCardBackPhotoId", resReport.data.fileId);
          } else if (type == 4) {
            that.$set(
              that.userDetail,
              "residenceBookMainPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "residenceBookMainId", resReport.data.fileId);
          } else if (type == 5) {
            that.$set(
              that.userDetail,
              "residenceBookPersonalPath",
              resReport.data.filePath + "?" + new Date().getTime()
            );
            that.$set(that.userDetail, "residenceBookPersonalId", resReport.data.fileId);
          }
          this.imgList = [
            that.userDetail.idCardFrontPhotoPath,
            that.userDetail.idCardBackPhotoPath,
            that.userDetail.residenceBookMainPath,
            that.userDetail.residenceBookPersonalPath,
            that.userDetail.personPhotoPath,
          ];
        }
      });
    },
    //保存
    submit() {
      if (!this.userDetail.fullName) {
        this.$message.warning("请输入姓名");
        return;
      }
      if (!base.isCardId(this.userDetail.idCardNo)) {
        this.$message.warning("身份证号码格式不正确");
        return;
      }
      if (!base.isPoneAvailable(this.userDetail.phone)) {
        this.$message.warning("手机号码格式不正确");
        return;
      }

      if (!this.userDetail.censusRegisterType) {
        this.$message.warning("请选择户籍类型");
        return;
      }
      if (!this.userDetail.insuredStatus) {
        this.$message.warning("请选择参保身份");
        return;
      }
      if (!this.userDetail.permanentAddress) {
        this.$message.warning("请输入户籍地址");
        return;
      }
      if (!this.userDetail.address) {
        this.$message.warning("请输入联系地址");
        return;
      }
      if (!this.userDetail.areaCode) {
        this.$message.warning("请选择缴纳城市");
        return;
      }

      if (!this.userDetail.platformId) {
        this.$message.warning("请选择缴纳平台");
        return;
      }

      if (
        this.isPaySocialSecurity &&
        (parseFloat(this.userDetail.socialSecurityBasic) <
          parseFloat(this.socialSecurityBasicValMin) ||
          parseFloat(this.userDetail.socialSecurityBasic) >
            parseFloat(this.socialSecurityBasicValMax))
      ) {
        this.$message.warning("请输入符合规则的社保基数");
        return;
      }

      if (this.isPaySocialSecurity && !this.userDetail.socialSecurityDate) {
        this.$message.warning("请选择社保起缴月份");
        return;
      }

      if (
        this.isPayFund &&
        (parseFloat(this.userDetail.fundBasic) < parseFloat(this.fundBasicValMin) ||
          parseFloat(this.userDetail.fundBasic) > parseFloat(this.fundBasicValMax))
      ) {
        this.$message.warning("请输入符合规则的公积金基数");
        return;
      }

      if (this.isPayFund && !this.userDetail.fundDate) {
        this.$message.warning("请选择公积金起缴月份");
        return;
      }

      var reqData = JSON.parse(JSON.stringify(this.userDetail));
      reqData.paymentMethod = "2"; //公司全缴
      reqData.socialSecurityBasic = parseFloat(reqData.socialSecurityBasic) || 0;
      reqData.fundBasic = parseFloat(reqData.fundBasic) || 0;
      reqData.medicalInsuranceBase = parseFloat(reqData.socialSecurityBasic) || 0;

      // reqData.basicInfo = this.basicInfoTable;
      reqData.isPayFund = this.isPayFund ? 1 : 2;
      reqData.payWages=this.isWages?1:2;
      reqData.payingMedicalInsurance=this.isPayMedical?1:2;
      reqData.isPaySocialSecurity = this.isPaySocialSecurity ? 1 : 2;
      reqData.isJobFirst = 0; //0入职；1不入职
      reqData.companyId = this.$route.query.companyId;
      reqData.associatedContracts=this.associatedContracts?1:2;
      //养老金
      reqData.pensionEnterprisePays=this.userDetail.socialSecurityBasic*this.userDetail.companyRetirementRate*1||0;//企业
      reqData.pensionPersonalPayment=this.userDetail.socialSecurityBasic*this.userDetail.personRetirementRate*1||0;//个人
      //失业金
      reqData.unemployedCompanyPays=this.userDetail.socialSecurityBasic*this.userDetail.companyUnemploymentRate*1||0;//企业
      reqData.unemployedIndividualsPay=this.userDetail.socialSecurityBasic*this.userDetail.personUnemploymentRate*1||0;//个人
      //工伤赔偿
      reqData.workersCompensationCompany=this.userDetail.socialSecurityBasic*this.userDetail.companyNdustrialInjuryRate*1||0;//工伤赔偿公司
      //伤残保险公司赔付
      reqData.disabilityInsuranceCompanyPays=this.userDetail.socialSecurityBasic*this.userDetail.companyDisabilityBenefitsRate*1||0;//公司残障福利费率
      //医疗保险
      reqData.paidByMedicalInsuranceCompanies=this.userDetail.medicalInsuranceBase*this.userDetail.companyMedicalRate*1||0;//企业
      reqData.medicareIndividualPayouts=this.userDetail.medicalInsuranceBase*this.userDetail.personMedicalRate*1||0;//个人
      //公积金
      reqData.fundCompanyPayment=this.userDetail.fundBasic*this.userDetail.companyFundRate*1||0;
      reqData.fundPersonPayment=this.userDetail.fundBasic*this.userDetail.personFundRate*1||0;

      reqData.hireType=1;

      reqData.idCardFrontPhotoId=this.userDetail.idCardFrontPhotoPath;
      reqData.idCardBackPhotoId=this.userDetail.idCardBackPhotoPath;
      reqData.residenceBookMainId=this.userDetail.residenceBookMainPath;
      reqData.residenceBookPersonalId=this.userDetail.residenceBookPersonalPath;
      reqData.personPhotoId=this.userDetail.personPhotoPath;

      this.submitLoading = true;
      let reqReport = reqRep({ traCode: "_ADD_PERSON_IN_JOB_V2_3", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
          this.submitLoading = false;
        } else {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.goBack();
          this.submitLoading = false;
        }
      });
    },
    typeFilter(a, b, c) {
      if (c == 1) {
        return "比例";
      } else {
        return "值";
      }
    },
    defaultValFormatter(a, b, c) {
      if (c >= 0) {
        return c;
      } else {
        return "-";
      }
    },
    valueFormatter(a, b, c) {
      if (c > 0) {
        return c + "%";
      } else {
        return "0";
      }
    },
    paymentTypeIdFilter(a, b, c) {
      return this.itemClassification[c].label;
    },
    signFormatter(a, b, c) {
      return c + "元";
    },
    cls(){
      this.userDetail={
        fullName:"",//姓名
        idCardNo:"",//身份证
        nation: "汉族",//民族
        sex: 1,//性别
        phone:"",//手机号
        censusRegisterType: 1,//户籍类型
        insuredStatus: 0,//参保身份
        typeOfWork: 0,//职工工种
        permanentAddress: "",//户籍地址
        education: 0,//最高学历
        address:"",//联系地址

        isLocalSocialSecurity: 0,//当地社保
        areaCode:"",//缴纳城市
        platformId: 0,//缴纳平台
        /*社保*/
        socialSecurityAccount:"",//社保账号
        socialSecurityBasic:"",//社保基数
        socialSecurityDate:"",//社保起缴月份
        companyRetirementRate:"",//社保养老企业支付
        personRetirementRate:"",//社保养老个人支付
        companyUnemploymentRate:"",//社保失业公司支付
        personUnemploymentRate:"",//社保失业个人支付
        companyNdustrialInjuryRate:"",//社保工伤公司支付
        companyDisabilityBenefitsRate:"",//社保残保金公司支付
        /*医保*/
        medicalInsuranceBase:"",//医保基数
        companyMedicalRate:"",//医保企业支付
        personMedicalRate:"",//医保个人支付
        /*公积金*/
        fundAccount:"",//公积金账号
        fundBasic:"",//公积金基数
        companyFundRate:"",//公积金企业支付
        personFundRate:"",//公积金个人支付
        fundDate:"",//公积金起缴月份
        /*工资*/
        wages:"",//工资
        /*合同*/
        contractNumber:"",//合同编号
        laborContractStart:"",//合同开始日期
        laborContractEnd:"",//合同结束日期
        employmentAgreementType:"",//用工协议类型（1：劳务派遣，2：非劳务派遣）
        /*证件照片*/
        idCardFrontPhotoPath:"",//身份证正面照片(头像面)
        idCardBackPhotoPath:"",//身份证反面照片(国徽面)
        residenceBookMainPath:"",//户口本主页
        residenceBookPersonalPath:"",//户口本个人页
        personPhotoPath:"",//二寸白底免冠照

      };
    },
    initData(){
      this.cls();
      var reqData = {
        companyId: this.$route.query.companyId,
        personId: ""
      };
      let reqReport = reqRep({
        traCode: "_GET_PERSON_V2_3",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          console.log(resReport.data);
          this.userDetail=resReport.data;
          this.getPlatform();
        }
      });
    }
  },
  filters: {
    dateFilter(val) {
      if (val) {
        return base.timeSwitch(val);
      }
    },
    monthFilter(val) {
      if (val) {
        return base.monthSwitch(val);
      }
    },
    registerTypeFilter(val) {
      if (val == 1) {
        return "本地城镇";
      } else if (val == 2) {
        return "本地农村";
      } else if (val == 3) {
        return "外地城镇";
      } else if (val == 4) {
        return "外地农村";
      } else if (val == 5) {
        return "外籍人员";
      }
    },
    
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
    },
  },
  created() {
    this.insuredStatusOptions = commonData.insuredStatusOptions;
    this.typeOfWorkOptions = commonData.typeOfWorkOptions;
    this.nationOptions = commonData.nationOptions;
    this.educationOptions = commonData.educationOptions;
    this.censusOptions = commonData.censusOptions;
    this.itemClassification = commonData.itemClassification;
    this.$set(this.userDetail, "insuredStatus", this.insuredStatusOptions[0]);
    this.getAddress();
    this.initData();
  },
};
</script>
<style scoped>
.red-star::after {
  content: ' *';
  color: red;
}
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
}
.header i {
  margin-right: 5px;
  cursor: pointer;
}
.header span {
  cursor: pointer;
}
.add {
  float: right;
  color: #666;
  cursor: pointer;
}
.add:hover {
  color: #13cb6e;
}
.el-input,
.el-select {
  width: 220px;
}
.leave {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.leave .message {
  display: inline-block;
  line-height: 34px;
}
.leave-pointer {
  float: right;
}
.leave-pointer span {
  color: #666;
  margin-left: 20px;
  cursor: pointer;
}
.leave-pointer .reset:hover {
  color: #13cb6e;
}
.leave-pointer i {
  font-weight: bold;
  padding-right: 5px;
}
.leave-pointer .btn {
  height: 34px;
  line-height: 14px;
  padding: 8px;
  color: #fff;
  background-color: #13cb6e;
}
.change {
  display: inline-block;
  cursor: pointer;
  padding: 20px 20px 0;
}
.change i {
  color: #13cb6e;
  font-weight: bold;
  vertical-align: top;
}
.change:hover {
  color: #13cb6e;
}
.staff-detail-general {
  margin: 30px 0;
}
.p-l-xxl {
  padding-left: 44px;
}
.p-l-xxl .name {
  font-size: 24px;
  font-weight: 700;
}
.p-l-xxl .p-l {
  color: #666;
  font-size: 14px;
  padding-left: 15px;
}
.mt {
  color: #999;
  padding: 20px 0 0 44px;
}
.mt ul {
  float: left;
  width: 50%;
}
.mt ul li {
  margin-bottom: 5px;
}
.mt i {
  color: #fff;
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-style: normal;
  border-radius: 3px;
  cursor: pointer;
  background-color: #13cb6e;
}
.p-t-lg {
  clear: both;
  //padding: 30px 44px;
  border-top: 1px solid #eee;
}
header .title {
  display: inline-block;
  font-size: 18px;
}
header .edit {
  float: right;
  color: #666;
  cursor: pointer;
}
.edit:hover {
  color: #13cb6e;
}
.edit i {
  vertical-align: bottom;
}
.main {
  margin-top: 30px;
}
.main > section {
  float: left;
  padding-bottom: 15px;
  width: 50%;
}
.main span {
  font-size: 14px;
  color: #666;
}
.main > section span:first-child {
  display: inline-block;
  width: 120px;
}
.warn {
  color: #f56c6c;
}
.main .value {
  padding-left: 5px;
  color: #666;
}
.family {
  padding: 10px 20px;
  background-color: #eee;
  border-radius: 3px;
}
.family .info {
  display: inline-block;
}
.info .f-name,
.word-address {
  color: #666 !important;
}
.info li {
  margin-bottom: 5px;
}
.info span {
  display: inline-block;
  margin-right: 20px;
}
.family .operation {
  float: right;
  text-align: right;
}
.operation > span {
  margin-left: 20px;
  display: inline-block;
  cursor: pointer;
}
.operation > span:hover {
  color: #13cb6e;
}
.img-bj {
  position: relative;
  width: 225px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
.img-head {
  position: relative;
  width: 108px;
  height: 135px;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}
/* .img-head img,
.img-bj img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  border-radius: 4px;
} */

.img-box p {
  color: #999;
  font-size: 12px;
}
.tip {
  color: #f56c6c;
  font-size: 12px;
  padding-left: 120px;
  text-align: center;
  margin-bottom: 4px;
}
.img-box {
  float: left;
  margin: 0 10px 10px 0;
}
.img-box .tip-head {
  color: #999;
  width: 108px;
  margin: 0 10px 10px 0;
}
.img-box .upBtn {
  margin-top: 10px;
  position: relative;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  background-color: #13cb6e;
}
.img-box .upBtn input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}
.explain {
  color: #999;
  margin-top: 10px;
}
.box {
  margin-right: 40px;
  margin-bottom: 20px;
}
.input-box {
  position: relative;
  float: left;
  width: 33%;
  margin-bottom: 22px;
}
.input-box-max {
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: 22px;
}
.input-box .title,
.box .title {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 113px;
  color: #666;
}

.input-box .value {
  display: inline-block;
  width: 220px;
}
.input-box p {
  padding-top: 4px;
  padding-left: 146px;
  font-size: 12px;
  color: #999;
}
.data-range {
  position: absolute;
  bottom: -18px;
  left: 146px;
  font-size: 12px;
  color: #f56c6c;
}
.button-box {
  clear: both;
  border-top: 1px solid #eee;
  padding: 30px;
}
.button-box > div {
  display: inline-block;
  width: 50px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.comfirm {
  margin-left: 10px;
  color: #fff;
  background-color: #13cb6e;
}
.table {
  margin-top: 20px;
}
</style>
